<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>SHOTO</title>
    <link rel="stylesheet" href="./shoto.css"/>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
</head>
<body>
<div class="a">
    <div class="container">
        <img src="./img/logoNewWhite-1.png" style="margin-top: 70px;">
        <p style="color: white;margin-top: 150px; font-weight: 100; font-size: 48px; ">Never miss a photo again!</p>
        <p style="color: white;margin-top: 36px; font-weight: 100; font-size: 28px;">Shoto is the easiest way to get the photos your</p>
        <p style="color: white;margin-top: -15px; font-weight: 100; font-size: 28px;">friends have on their phone from your times together.</p>
        <p style="margin-top: 50px;">
            <a href=""><img src="./img/app_badges1.png"></a>
            <a href="" style="margin-left: 20px;"><img src="./img/app_badges2.png"></a>
        </p>
        <div class="container input-append" style="margin-top: 20px;">
            <input class="span12" id="appendedInputButton" type="text"  placeholder="   Get Shoto. Enter phone #" style="width: 260px;height: 50px;font-size: 18px;margin-left: -15px;">
            <button class="btn"  style="background-color:rgba(44, 145, 239, 0.87); height: 50px;width: 50px;margin-left: -5px;margin-top: -2px;">X</button>
        </div>
        <div>
            <img src="./img/galaxy.png" alt="phone" style="margin-left: 760px;margin-top: -480px;">
        </div>

    </div>
</div>
<div class="b">
    <div class="container">
        <div>
            <img src="./img/phone-2.png" alt="phone" style="margin-top: 90px;">
        </div>
        <div>
            <img src="./img/icn-2.png" style="margin-left: 380px;margin-top: -830px;">
        </div>
        <p style="font-size: 38px; color: rgba(14, 112, 221, 0.82); margin-left: 380px;margin-top: -310px;">Font Style 文字样式</p>

        <p style="font-size: 26px;color: #585858;  margin-left: 380px;margin-top: 0px;">
            语法：{font:font-style font-variant font-weight font-size font-family}
        </p>
        <p style="font-size: 26px;color: #5d5d5d;  margin-left: 380px;margin-top: -15px;">文字样式是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观。</p>
    </div>
</div>
<div class="c">
    <div class="container">
        <div>
            <img src="./img/font-family1.png" style="float: left;margin-top: 90px;">
            <img src="./img/font-family2.png" style="float: right;margin-top: 90px;"/>
        </div>

        <p style="font-size: 38px; color:white; margin-top: 400px;">Font-family 文字类型</p>
        <p style="font-size: 26px;color: white;float: left;margin-top: 0px;">
            font-family可以把多个字体名称作为一个“回退”系统来保存。
            如果浏览器不支持第一个字体，则会尝试下一个。
            family-name-  指定系列的名称；具体字体例如：times courier arial
            generic-family-  通常字体系列名称，比如：serif sans-serif cursive fantasy monospace
            语法：{font-family:字体1,字体2,字体3,...}
        </p>
    </div>
</div>
<div class=" d">
    <div class="container ">
        <div>
            <img src="./img/font-size1.png" style="float:left; margin-top: 90px;">
            <img src="./img/font-size2.png" style="float: right; margin-top: 90px"/>
        </div>
        <div>
            <p style="font-size: 38px; color: rgba(14, 112, 221, 0.82);margin-top: 400px;">Font-size 字体大小</p>
            <p style="font-size: 26px;color: #585858;  margin-left: 380px;margin-top: 10px;">
            h1 {font-size: 250%} ；h2 {font-size: 200%} ；p {font-size: 100%}
            值：xx-small；x-small；small；medium；large；x-large；xx-large
            smaller- 把font-size设置为比父元素更小的尺寸
            larger- 把font-size设置为比父元素更大的尺寸
            length- 把font-size设置为一个固定的值
            %- 把font-size设置为基于父元素的一个百分比值
            inherit- 规定应该从父元素继承字体尺寸
            语法：{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
            </p>
        <p style="font-size: 26px;color: #5d5d5d;  margin-left: 380px;margin-top: -15px;">We use time, location, and our algorithm to tell you which </p>
        <p style="font-size: 26px;color: #5a5a5a;  margin-left: 380px;margin-top: -15px;">friends took photos when you were together.</p>
    </div>
</div>
<div class="e">
    <div class="container">
        <div>
            <img src="./img/字体风格1.png" style="float: left;margin-top: 90px;">
            <img src="./img/字体风格2.png" style="float: right;margin-top: 90px;"/>
        </div>
        <p style="font-size: 38px; color:white; margin-top: 400px;">Font-style 字体风格</p>
        <p style="font-size: 26px;color: white;float: left;margin-top: 0px;">normal：默认值。浏览器显示一个标准的字体样式</p>
        <p style="font-size: 26px;color: white;float: left;margin-top: 30px;">inherit：规定应该从父元素继承字体样式</p>
        <p style="font-size: 26px;color: white;float: left;margin-top: -15px;">italic：浏览器会显示一个斜体的字体样式</p>
        <p style="font-size: 26px;color: white;float: left;margin-top: -15px;">oblique：浏览器会显示一个倾斜的字体样式</p>
    </div>
</div>
<div class="f">
    <div class="container ">
        <div>
            <img src="./img/字体粗细1.png" style="float: left; margin-top: 10px;">
            <img src="./img/字体粗细2.png" style="float: right; margin-top: 10px;"/>
        </div>
        <p style="font-size: 38px; color: rgba(14, 112, 221, 0.82); margin-left: 380px;margin-top: 300px;">Font weight 字体粗细</p>
        <p style="font-size: 26px;color: #585858;  margin-left: 380px;margin-top: 0px;">
            bold：定义粗体字符
            bolder：定义更粗的字符
            light：定义细的字符
            normal：默认值。定义标准的字符
            100-900：定义由粗到细的字符。400等同于normal，而700等同于bold。
            inherit：规定应该从父元素继承字体的粗细
        </p>
    </div>
</div>
    <div class="i">
        <div class="container ">
            <div>
                <img src="./img/字体颜色.png" style="float: left; margin-top: 10px;">
            </div>
            <p style="font-size: 38px; color: rgba(14, 112, 221, 0.82); margin-left: 500px;margin-top: 10px;">Font color 字体颜色</p>
            <p style="font-size: 26px;color: #585858;  margin-left: 380px;margin-top: 0px;">
                CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0（十六进制 00）。最高值是 255（十六进制 FF）。
                十六进制值使用三个双位数来编写，并以 # 符号开头。
                从 0 到 255 种红绿蓝值能够组合出总共超过一千六百万种不同的颜色（根据 256 x 256 x 256 计算）。
                例：#00000对应的是黑色
                #FFFFFF对应的是白色
            </p>
            <h1 style="color: #ffffff">下面这段字体为白色。</h1>
        </div>
    </div>
    <div class="j">
        <div class="container ">
            <div>
                <img src="./img/文字阴影1.png" style="float: left; margin-top: 10px;">
                <img src="./img/文字阴影2.jpg" style="float: right; margin-top: 10px;"/>
            </div>
            <p style="font-size: 38px; color: rgba(14, 112, 221, 0.82); margin-left: 500px;margin-top: 10px;">Text shadow 字体阴影</p>
            <p style="font-size: 26px;color: #585858;  margin-left: 380px;margin-top: 0px;">
                CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0（十六进制 00）。最高值是 255（十六进制 FF）。
                十六进制值使用三个双位数来编写，并以 # 符号开头。
                从 0 到 255 种红绿蓝值能够组合出总共超过一千六百万种不同的颜色（根据 256 x 256 x 256 计算）。
                例：#00000对应的是黑色
                #FFFFFF对应的是白色
            </p>

        </div>
    </div>


<div class="g">
    <div class="container">
        <a  href=""><img class="span2" src="./img/sd1.png"></a>
        <a  href=""><img class="span2" src="./img/sd2.png"></a>
        <a  href=""><img class="span2" src="./img/sd3.png"></a>
        <a  href=""><img class="span2" src="./img/sd4.png"></a>
        <a  href=""><img class="span2" src="./img/sd5.png"></a>
        <a  href=""><img class="span2" src="./img/sd6.png"></a>
    </div>
</div>
<div class="h">
    <div class="container">
        <p style="font-size: 32px;margin-top: 40px;">Shoto</p>
        <p style="font-size: 16px;">Never miss a photo again!</p>
        <a href="" style="float: right;margin-top: -80px;"><img src="./img/icon-ios.png"></a>
        <a href="" style="float: right;margin-top: -80px;margin-right: 160px;"><img src="./img/icon-google.png"></a>
        <div style="width: 100%;height: 1px;background-color: rgba(153, 153, 153, 0.69);margin-top: 60px;"></div>
        <p style="margin-top: 10px;">Shoto, Inc</p>
        <a style="float: left;margin-top:-30px; margin-left: 400px;">Contact</a>
        <a style="float: left;margin-top:-30px; margin-left: 480px;">Investors</a>
        <a style="float: left;margin-top:-30px; margin-left: 560px;">Privacy</a>
        <a style="float: left;margin-top:-30px; margin-left: 620px;">Terms</a>
        <a style="float: right;margin-top:-30px; "><img src="./img/instagram.png"></a>
        <a style="float: right;margin-top:-30px; margin-right: 50px;"><img src="./img/facebook-icn.png"></a>
        <a style="float: right;margin-top:-30px; margin-right: 100px;"><img src="./img/twitter-icn.png"></a>
    </div>
</div>

</body>
</html>